<template>
    <div class="salary-range-container">
      <el-form-item label="薪资范围" prop="salaryRange">
        <div class="salary-range-inputs">
          <el-select
            v-model="rangeType"
            placeholder="薪资类型"
            style="width: 70px"
            @change="handleRangeTypeChange"
          >
            <el-option label="月薪" value="monthly" />
            <el-option label="年薪" value="yearly" />
            <el-option label="时薪" value="hourly" />
          </el-select>
          
          <el-input-number
            v-model="minSalary"
            :min="0"
            :max="maxSalary || 1000000"
            :controls="false"
            placeholder="最低薪资"
            @change="validateSalary"
          />
          
          <span class="separator">至</span>
          
          <el-input-number
            v-model="maxSalary"
            :min="minSalary || 0"
            :max="1000000"
            :controls="false"
            placeholder="最高薪资"
            @change="validateSalary"
          />
          
          <span class="unit">{{ salaryUnit }}</span>
        </div>
        
        <div v-if="error" class="error-message">
          <el-icon><Warning /></el-icon>
          <span>{{ error }}</span>
        </div>
        
        <div v-if="showSalaryDisplay" class="salary-display">
          薪资范围: {{ formattedSalaryRange }}
        </div>
      </el-form-item>
    </div>
  </template>
  
  <script setup>
  import { ref, computed, watch } from 'vue'
  import { Warning } from '@element-plus/icons-vue'
  
  const props = defineProps({
    salaryLeft: {
      type: [Number, null],
      default: null
    },
    salaryRight: {
      type: [Number, null],
      default: null
    },
    salaryType: {
      type: String,
      default: 'monthly'
    },
    showDisplay: {
      type: Boolean,
      default: true
    }
  })
  
  const emit = defineEmits(['update:salaryLeft', 'update:salaryRight', 'update:salaryType'])
  
  // 数据绑定
  const minSalary = ref(props.salaryLeft)
  const maxSalary = ref(props.salaryRight)
  const rangeType = ref(props.salaryType)
  const error = ref('')
  
  // 计算属性
  const salaryUnit = computed(() => {
    const units = {
      monthly: '元/月',
      yearly: '元/年',
      hourly: '元/小时'
    }
    return units[rangeType.value] || '元/月'
  })
  
  const showSalaryDisplay = computed(() => {
    return props.showDisplay && (minSalary.value !== null || maxSalary.value !== null)
  })
  
  const formattedSalaryRange = computed(() => {
    const min = minSalary.value ? formatNumber(minSalary.value) : '面议'
    const max = maxSalary.value ? formatNumber(maxSalary.value) : '上不封顶'
    
    if (min === '面议' && max === '上不封顶') {
      return '薪资面议'
    }
    
    return `¥${min}-${max}${salaryUnit.value.replace('元', '')}`
  })
  
  // 方法
  const formatNumber = (num) => {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  }
  
  const validateSalary = () => {
    if (minSalary.value !== null && 
        maxSalary.value !== null && 
        minSalary.value > maxSalary.value) {
      error.value = '最低薪资不能高于最高薪资'
    } else {
      error.value = ''
    }
    emitUpdate()
  }
  
  const handleRangeTypeChange = () => {
    emitUpdate()
  }
  
  const emitUpdate = () => {
    emit('update:salaryLeft', minSalary.value)
    emit('update:salaryRight', maxSalary.value)
    emit('update:salaryType', rangeType.value)
  }
  
  // 监听props变化
  watch(() => [props.salaryLeft, props.salaryRight, props.salaryType], ([newMin, newMax, newType]) => {
    minSalary.value = newMin
    maxSalary.value = newMax
    rangeType.value = newType
  }, { deep: true })
  </script>
  
  <style scoped>
  .salary-range-container {
    width: 100%;
  }
  
  .salary-range-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  
  .separator {
    color: var(--el-text-color-secondary);
    padding: 0 5px;
  }
  
  .unit {
    color: var(--el-text-color-secondary);
    white-space: nowrap;
  }
  
  .error-message {
    color: var(--el-color-danger);
    font-size: 12px;
    display: flex;
    align-items: center;
    margin-top: 5px;
  }
  
  .error-message .el-icon {
    margin-right: 5px;
  }
  
  .salary-display {
    margin-top: 8px;
    color: var(--el-text-color-regular);
    font-size: 14px;
  }
  
  /* 调整输入框宽度 */
  :deep(.el-input-number) {
    width: 140px;
  }
  
  /* 响应式布局 */
  @media (max-width: 768px) {
    .salary-range-inputs {
      flex-direction: column;
      align-items: flex-start;
    }
    
    :deep(.el-input-number),
    :deep(.el-select) {
      width: 100% !important;
    }
  }
  </style>